<template>
  <div>
    <el-form :inline="true" @submit.prevent>
      <el-form-item label="业务类型">
        <el-select v-model="query.businessType" placeholder="全部">
          <el-option label="全部" value=""></el-option>
          <el-option label="请假" value="请假"></el-option>
          <el-option label="选课" value="选课"></el-option>
          <el-option label="成绩录入" value="成绩录入"></el-option>
          <el-option label="职称申请" value="职称申请"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作类型">
        <el-input v-model="query.operationType" placeholder="如审批、提交"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-input v-model="query.status" placeholder="如已签章、完成"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchLogs">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="logs" style="width: 100%; margin-top: 20px;">
      <el-table-column
        prop="createTime"
        label="日期时间"
        width="180"
      >
        <template #default="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="operationType" label="操作类型" width="100"/>
      <el-table-column prop="operatorName" label="操作人" width="120"/>
      <el-table-column prop="content" label="操作内容"/>
      <el-table-column prop="status" label="状态" width="100"/>
      <el-table-column label="电子签章" width="100">
        <template #default="scope">
          <span v-if="scope.row.isSignature">✔️</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'LogCenter',
  props: {
    userRole: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      logs: [],
      query: {
        businessType: '',
        operationType: '',
        status: ''
      }
    }
  },
  methods: {
    async fetchLogs() {
      const params = { ...this.query, userRole: this.userRole }
      const res = await axios.get('/api/operation-logs', { params })
      this.logs = res.data
    },
    formatDate(val) {
      if (!val) return '';
      const d = new Date(val);
      return `${d.getFullYear()}/${d.getMonth()+1}/${d.getDate()} ${d.getHours().toString().padStart(2,'0')}:${d.getMinutes().toString().padStart(2,'0')}`;
    }
  },
  mounted() {
    this.fetchLogs()
  },
  watch: {
    userRole() {
      this.fetchLogs()
    }
  }
}
</script> 